<template>
  <div class="panel bar">
    <h2>
      月销量情况（万吨）<a href="javascript:;">2023</a>
      <a href="javacript:;"> 2024</a>
    </h2>
    <div ref="target" class="chart"></div>
    <div class="panel-footer"></div>
  </div>
</template>
<script setup>
import { ref, onMounted, watch } from "vue";
import * as echarts from "echarts";

const target = ref(null);
let myChart = null;
onMounted(() => {
  myChart = echarts.init(target.value);
  renderChart();
});

const renderChart = () => {
  var option = {
    legend: {},
    tooltip: {},
    dataset: {
      dimensions: ["product", "精煤", "中煤", "煤泥"],
      source: [
        { product: "1月份", 精煤: 85.8, 中煤: 43.3, 煤泥: 93.7 },
        { product: "2月份", 精煤: 73.4, 中煤: 83.1, 煤泥: 55.1 },
        { product: "3月份", 精煤: 65.2, 中煤: 86.4, 煤泥: 82.5 },
        { product: "4月份", 精煤: 53.9, 中煤: 72.4, 煤泥: 39.1 },
      ],
    },
    xAxis: { type: "category" },
    yAxis: {},
    // Declare several bar series, each will be mapped
    // to a column of dataset.source by default.
    series: [{ type: "bar" }, { type: "bar" }, { type: "bar" }],
  };

  option && myChart.setOption(option);
  //跟随屏幕一起缩放
  window.addEventListener("resize", () => {
    myChart.resize();
  });
};

// watch(
//   () => props.data,
//   () => {
//     renderChart();
//   }
// );
</script>

<style>
.mainbox {
  display: flex;
  min-width: 1024px;
  max-width: 1920px;
  margin: 0 auto;
  padding: 0.125rem 0.125rem 0;
}
.mainbox .column {
  flex: 3;
}
.mainbox .column:nth-child(2) {
  flex: 5;
  margin: 0 0.125rem 0.1875rem;
  overflow: hidden;
}
.mainbox .panel {
  position: relative;
  height: 3.875rem;
  padding: 0 0.1875rem 0.5rem;
  border: 1px solid rgba(25, 186, 139, 0.17);
  margin-bottom: 0.1875rem;
  background: url("assets/images/line(1).png") rgba(255, 255, 255, 0.03);
}
.mainbox .panel::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 10px;
  height: 10px;
  border-left: 2px solid #02a6b5;
  border-top: 2px solid #02a6b5;
  content: "";
}
.mainbox .panel::after {
  position: absolute;
  top: 0;
  right: 0;
  width: 10px;
  height: 10px;
  border-right: 2px solid #02a6b5;
  border-top: 2px solid #02a6b5;
  content: "";
}
.mainbox .panel .panel-footer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}
.mainbox .panel .panel-footer::before {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 10px;
  height: 10px;
  border-left: 2px solid #02a6b5;
  border-bottom: 2px solid #02a6b5;
  content: "";
}
.mainbox .panel .panel-footer::after {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 10px;
  height: 10px;
  border-right: 2px solid #02a6b5;
  border-bottom: 2px solid #02a6b5;
  content: "";
}
.mainbox .panel h2 {
  height: 0.6rem;
  color: #fff;
  line-height: 0.6rem;
  text-align: center;
  font-size: 0.25rem;
  font-weight: 400;
}
.mainbox .panel h2 a {
  color: #fff;
  text-decoration: none;
  margin: 0 0.125rem;
}
.mainbox .panel .chart {
  height: 100%;
}
</style>
